<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="姓名转拼音工具"
  />
  <a-row
    :gutter="20"
    style="padding:30px"
  >
    <a-col :span="8">
      <a-form title="配置">
        <a-form-item label="拼音风格">
          <a-select
            v-model:value="config.style"
            :dropdown-match-select-width="false"
            placeholder="选择风格"
            width="100px"
          >
            <a-select-option :value="0">
              不带声调
            </a-select-option>
            <a-select-option :value="1">
              声调在韵母的第一个字母上
            </a-select-option>
            <a-select-option :value="2">
              声调以数字形式在拼音之后，使用数字 0~4 标识
            </a-select-option>
            <a-select-option :value="5">
              声调以数字形式在声母之后，使用数字 0~4 标识
            </a-select-option>
            <a-select-option :value="3">
              仅保留声母
            </a-select-option>
            <a-select-option :value="4">
              仅保留首字母
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-tooltip
            :title="longLastname"
            placement="right"
          >
            <a-checkbox
              v-model:checked="config.checkLong"
            >
              检查复姓
            </a-checkbox>
          </a-tooltip>
          <a-checkbox
            v-model:checked="config.reversed"
          >
            姓氏后置
          </a-checkbox>
          <a-checkbox
            v-model:checked="config.upperLastName"
          >
            姓氏全部大写
          </a-checkbox>
        </a-form-item>
      </a-form>
    </a-col>
    <a-col
      :span="16"
      style="text-align:left"
    >
      <a-form layout="inline">
        <a-form-item label="原文">
          <a-textarea
            v-model:value="text"
            :auto-size="true"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="拼音">
          <a-textarea
            v-model:value="result"
            :auto-size="true"
            readonly
          />
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>

<script lang="ts">
import py from 'pinyin'
import { defineComponent } from 'vue'
import { longLastname } from '@/lib/lastName'

interface Config {
  style: number;
  checkLong: boolean;
  reversed: boolean;
  upperLastName: boolean;}

const long = new Set(longLastname)

function pyName (name: string, config: Config): string {
  const { style, checkLong, reversed, upperLastName } = config
  const isLong = long.has(name.slice(0, 2)) && checkLong// 是否是复姓

  const pyArray = py(name, {
    style: style,
    segment: false
  })
  if (pyArray.length <= 0) {
    return ''
  }
  // 处理姓氏
  let lastName = ''

  // 检查复姓
  if (!isLong) {
    lastName = pyArray[0][0]
  } else {
    lastName = pyArray[0][0] + pyArray[1][0]
  }
  // 首字母大写
  lastName = lastName[0].toUpperCase() + lastName.slice(1)
  if (upperLastName) {
    lastName = lastName.toUpperCase()
  }

  // 处理名
  const firstName = pyArray.slice(isLong ? 2 : 1).map((e) => {
    return e[0]
  }).reduce((pre, cur, index): string => {
    if (index === 0) {
      cur = cur[0].toUpperCase() + cur.slice(1)
    }
    return pre + cur
  }, '')

  // 组合
  if (reversed) {
    return `${firstName} ${lastName}`
  }
  return `${lastName} ${firstName}`
}

export default defineComponent({
  name: 'Name',

  data () {
    return {
      text: '张三',

      config: { style: 0, checkLong: true, reversed: true, upperLastName: false } as Config
    }
  },
  computed: {
    longLastname: (): string => { return longLastname.join(',') },
    result (): string {
      return this.text.split('\n').map(line => {
        return pyName(line, this.config)
      }).join('\n')
    }
  }

})
</script>
